<template>
  <button class="com-button" :class="className" @click="btnClick">
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
import { withDefaults, defineProps, defineEmits, computed } from "vue";
interface Props {
  /**button 类型 */
  type?: "primary" | "default" | "";
  /**button 大小 */
  size?: "mini" | "large" | "small" | "";
  /**圆狐大小  radius-mini 12rpx  radius-small 16rpx   '':半圆 */
  radius?: "radius-all" | "radius-small" | "radius-mini" | "";
  /**是否禁用*/
  disabled?: boolean | "";
  /**是否加载中，暂无样式，只是 true 时不可点击 */
  loading?: boolean;
  /**class*/
  className?: string;
}
interface Events {
  (e: "click"): void;
}
const props = withDefaults(defineProps<Props>(), {
  type: "default",
  disabled: false,
  loading: false,
});
const emits = defineEmits<Events>();

const className = computed(() => {
  let name = props.className || "";

  if (props.type) {
    name += " " + props.type;
  }

  if (props.size) {
    name += " " + props.size;
  }

  if (props.radius) {
    name += " " + props.radius;
  }

  if (props.disabled) {
    name += " disabled";
  }
  if (props.loading) {
    name += " loading";
  }
  console.log(name);
  return name;
});

const btnClick = () => {
  emits("click");
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "@/style/var.less";
@import "./com-button.less";
</style>
